<template>
    <div>
        <use-page-header/>
        <div class="wrapper">
            <a-card>
                <a-flex justify="space-between" class="margin-bottom">
                    <user-modal @ok="getData"/>
                </a-flex>
                <a-table :columns="columns" 
                    :loading="loading"  
                    :data-source="data" 
                    row-key="id" 
                    :row-selection="{}"
                    :pagination="tablePagination">
                    <template #bodyCell="{column,record}">
                        <template v-if="column.dataIndex === 'username'">
                            <a-flex gap="6" align="center">
                                <a-avatar size="small" :src="record.avatar" />
                                <span>{{ record.username }}</span>
                                <span>{{ record.mobile }}</span>
                            </a-flex>
                        </template>
                        <template v-if="column.dataIndex === 'status'">
                            <a-tag v-if="record.status" color="green">正常</a-tag>
                            <a-tag v-else color="red">禁用</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'role'">
                            <a-tag v-if="record.role === 'admin'" color="blue">超级管理员</a-tag>
                            <a-tag v-else-if="record.role === 'expert'" color="purple">专家管理员</a-tag>
                            <a-tag v-else>普通管理员</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'action'">
                           <div class="actions">
                            <span @click="showEditor(record)">编辑</span>
                            <span @click="onUpdate(record)">{{ record.status ? '禁用' :'启用' }}</span>
                            <span @click="onDelete(record.id)" class="danger">删除</span>
                           </div>
                        </template>
                    </template>
                </a-table>
            </a-card>
            <user-editor @ok="getData" v-model:open="editModal" :user-item="userItem"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { deleteUser, getUserList, updateUser } from '@/server/modules/user';
import UserModal from './components/userModal.vue';
import UserEditor from './components/userEditor.vue';
import { onMounted, ref } from 'vue';
import { tablePagination} from '@/config';
import useMessage from '@/hooks/useMessage'
import { Modal } from 'ant-design-vue';
import { hasPermission } from '@/hooks';
import usePageHeader from '@/components/usePageHeader.vue';

const data = ref<UserInfo[]>([])
const editModal = ref<boolean>(false)
const loading = ref<boolean>(false)
const userItem = ref<UserInfo>()

const columns = [
    {title:'用户名',dataIndex:'username'},
    {title:'角色',dataIndex:'role',width:120},
    {title:'创建时间',dataIndex:'create_time',width:180},
    {title:'最后登录',dataIndex:'update_time',width:180},
    {title:'状态',dataIndex:'status',width:80},
    {title:'操作',dataIndex:'action',width:240}
]
const getData = async()=>{
    try{
        loading.value = true
        const res = await getUserList()
        if(res.code === 200){
            data.value = res.data
        }else{
            useMessage(res.code,res.message)
        }
    }catch(err){
        return
    }finally{
        setTimeout(()=>{
            loading.value = false
        },300)
        loading.value = false
    }
}
const onUpdate = async(record:UserInfo)=>{ 
    if(!hasPermission('update')) return
    const data = {
        id:record.id,
        status:record.status ? 0 : 1
    }
    const res = await updateUser(data)
    if(res.code === 200){
        getData()
    }
    useMessage(res.code,res.message)
}
const onDelete = async(id:number)=>{
    if(!hasPermission('delete')) return
    Modal.confirm({
        title:'提示',
        content:'确定要删除吗？',
        onOk:async()=>{
            const res = await deleteUser(id)
            if(res.code === 200){
                useMessage(res.code,res.message)
                getData()
            }else{
                useMessage(res.code,res.message)
            }
        }
    })
}
const showEditor = (record:UserInfo) =>{
    userItem.value = record
    editModal.value = true
}
onMounted(()=>{
    getData()
})
</script>

<style scoped>
/* 这里可以添加样式 */
</style>
